<template>
    <div class="hot">
        热门搜索
        <div><span v-for="(song,index) in hotsearch" :key="index">{{song.first}}</span></div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                hotsearch:[]
            }
        },
        // 创建完成 就意味着可以调用data数据 methods方法
        created(){//ajax请求
            fetch("http://47.115.51.185:8081/search/hot")
            .then(response=>response.json())
            .then(re=>{
                this.hotsearch=re.result.hots;
                // console.log("获取结果===>",re);
            });
            console.log("热门搜索组件  created===>")
        }
    }
</script>

<style lang="scss" scoped>
.hot{
    div{
        display: flex;
        flex-wrap: wrap;
        span{
            margin:10px;
            border:1px solid gray;
            border-radius: 20px;
        }
    }
}
</style>